<template>
  <div class="search">
    <!-- 头 -->
      <div class="header">
          <div class="back" @click="$router.go(-1)">
            <svg t="1667884428326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2540" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="2541"></path></svg>
          </div>
          快看
      </div>
      <!-- 搜索框 -->
      <div class="inp">
        <div class="fangdaj"><img src="../assets/imgs/search.png" alt=""></div>
        <input type="text" placeholder="搜索作品名称" @keyup.enter="search" v-model="word">
        <div class="wenzi" @click="qvxiao">
          取消
        </div>
      </div>
      <!-- 默认 -->
      <div class="moren" v-if="type == 0">
            <!-- 热门搜索 -->
            <div class="hot">
        <div class="top">
          <div class="wenzi">
            热门搜索
          </div>
          <svg t="1667884711248" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3472" width="200" height="200"><path d="M1007.2 262.4c-12.8-6.4-32 0-38.4 19.2l-25.6 70.4C904.8 256 847.2 179.2 757.6 128c-108.8-64-230.4-89.6-352-57.6C232.8 108.8 104.8 236.8 60 409.6 53.6 428.8 66.4 441.6 79.2 448 98.4 448 111.2 441.6 117.6 422.4c38.4-153.6 153.6-268.8 307.2-300.8 108.8-25.6 217.6-6.4 307.2 51.2 76.8 44.8 134.4 115.2 166.4 198.4l-76.8-32c-12.8-6.4-32 0-38.4 19.2-6.4 12.8 0 32 12.8 38.4l128 51.2c6.4 6.4 12.8 6.4 19.2 6.4 0 0 6.4 0 6.4 0 0 0 0 0 0 0 0 0 0 0 6.4 0 6.4 0 12.8-6.4 12.8-12.8L1026.4 294.4C1032.8 281.6 1020 268.8 1007.2 262.4zM949.6 576c-12.8-6.4-32 6.4-32 19.2-38.4 153.6-153.6 268.8-307.2 300.8-108.8 25.6-217.6 6.4-307.2-51.2-76.8-44.8-134.4-115.2-166.4-198.4l76.8 32c12.8 6.4 32 0 38.4-19.2 6.4-12.8 0-32-12.8-38.4L104.8 576C98.4 576 92 569.6 85.6 569.6c0 0-6.4 0-6.4 0 0 0 0 0 0 0 0 0 0 0-6.4 0C66.4 576 60 582.4 60 588.8L2.4 729.6c-6.4 12.8 0 32 19.2 38.4 12.8 6.4 32 0 38.4-19.2l25.6-70.4C124 768 181.6 844.8 271.2 896c108.8 64 230.4 89.6 352 57.6 172.8-38.4 307.2-172.8 345.6-345.6C975.2 595.2 962.4 582.4 949.6 576z" p-id="3473"></path></svg>

        </div>
        <div class="body">
          <div class="item">我喜欢你</div>
          <div class="item">我不喜欢你</div>
          <div class="item">我你不</div>
          <div class="item">不我喜欢你</div>
          <div class="item">我喜不欢你</div>
          <div class="item">我喜欢你</div>
        </div>
            </div>
            <!-- 历史记录 -->
            <div class="history">
        <div class="wenzi">
          搜索历史
        </div>
        <div class=".svg" @click="del"><svg t="1667885088753" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4566" width="200" height="200"><path d="M110.325 231.601h83.275l38.767 682.942c0.779 14.201 12.565 25.316 26.793 25.316h508.28c14.229 0 26.015-11.141 26.793-25.342l38.148-682.917h83.331c14.846 0 26.848-12.027 26.848-26.845 0-14.82-12.002-26.847-26.848-26.847h-210.236l-13.109-70.256c0-14.82-12-26.848-26.849-26.848h-305.029c-14.846 0-26.846 12.028-26.846 26.848l-13.109 70.256h-210.184c-14.847 0-26.847 12.027-26.847 26.847 0 14.819 11.974 26.846 26.821 26.846zM387.336 134.5h251.338l13.108 43.411h-277.554l13.109-43.411zM778.608 231.601l-36.563 654.593h-457.516l-37.156-654.592h531.234zM380.075 835.857c0.538 0 1.020 0 1.557-0.026 14.819-0.832 26.121-13.531 25.263-28.325l-28.242-497.594c-0.833-14.819-13.88-25.961-28.324-25.289-14.818 0.833-26.122 13.53-25.263 28.323l28.243 497.594c0.805 14.283 12.645 25.317 26.766 25.317zM643.436 835.832c0.539 0.026 1.022 0.026 1.557 0.026 14.121 0 25.961-11.033 26.767-25.317l28.242-497.594c0.833-14.792-10.469-27.489-25.262-28.323-14.579-0.618-27.465 10.47-28.324 25.289l-28.242 497.594c-0.833 14.794 10.47 27.492 25.261 28.325zM513.019 835.857c14.847 0 26.847-12.026 26.847-26.846v-497.595c0-14.818-12-26.847-26.847-26.847-14.846 0-26.846 12.029-26.846 26.847v497.595c0 14.82 12 26.846 26.846 26.846z" p-id="4567"></path></svg></div>
            </div>
            <!-- 历史身体 -->
            <div class="hisbody">

          <div class="item" v-for="(item,index) in history" :key="index">
            <div class="left"><svg t="1667885815976" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7860" width="200" height="200"><path d="M511.913993 63.989249c-247.012263 0-447.924744 200.912481-447.924744 447.924744s200.912481 447.924744 447.924744 447.924744 447.924744-200.912481 447.924744-447.924744S758.926256 63.989249 511.913993 63.989249zM511.913993 895.677474c-211.577356 0-383.763481-172.186125-383.763481-383.763481 0-211.577356 172.014111-383.763481 383.763481-383.763481s383.763481 172.014111 383.763481 383.763481S723.491349 895.677474 511.913993 895.677474z" p-id="7861" fill="#8a8a8a"></path><path d="M672.05913 511.913993l-159.973123 0L512.086007 288.123635c0-17.717453-14.277171-32.166639-31.994625-32.166639-17.717453 0-31.994625 14.449185-31.994625 32.166639l0 255.956996c0 17.717453 14.277171 31.994625 31.994625 31.994625l191.967747 0c17.717453 0 32.166639-14.277171 32.166639-31.994625C704.053754 526.191164 689.604569 511.913993 672.05913 511.913993z" p-id="7862" fill="#8a8a8a"></path></svg></div>
            <div class="md">{{item}}</div>
          </div>

            </div>
      </div>
      <!-- 搜索盒子 -->
      <div class="searchover" v-if="type == 1">
        <div class="header">
          " <span>{{word}}</span> "的搜索结果
        </div>

        <div class="item" v-for="(item,index) in newlists" :key="index">
          <div class="imgs"><img :src="item.fmimg" alt=""></div>
          <div class="msg">
            <div class="name">{{item.fmname}}</div>
            <div class="who">{{item.showdoername}}</div>
            <div class="bq">{{item.fmbq}}</div>
          </div>
          <div class="like">+关注</div>
        </div>

      </div>

      <!-- 没搜到盒子 -->
      <div class="searchover" v-if="type == 2">
        

        <div class="meiyou">
          <img src="../assets/imgs/没搜到.jpg" alt="">
        </div>

        <div class="header" style="color:#c5c5c5;">
          Sorry~没有找到搜索结果
        </div>

      </div>
  </div>
</template>

<script>
import { getHomeData } from "../api/booklists"
export default {
  data(){
    return{
      word:"",
      history:[],
      type:0,
      keylists:[],
      newlists:[]
    }
  },
  methods:{
    search(){//搜索
      this.newlists=[]
      this.history.push(this.word)//把关键字放到历史数组里面
      window.localStorage.setItem("keyword",this.word)
      
      window.localStorage.setItem("history",JSON.stringify(this.history))//把历史数组放入本地
      this.type = 1


      // 显示哪个盒子
      // this.newlists = this.keylists.filter(item=>item.fmname.includes(this.word))
      this.keylists.forEach(item=>{
        if(item.fmname.indexOf(this.word)!=-1){
          this.newlists.push(item)
        }
      })
      console.log(this.keylists)
      console.log(this.newlists)
    },
    del(){//删除历史数组
      this.history = [],//清空数组
      window.localStorage.setItem("history",[])//清空本地数组
    },
    qvxiao(){
      this.type = 0
      this.word = ""//清空输入框
    }
  },
  created(){
    if(window.localStorage.getItem("history")){//如果本地历史数组不为空，历史数组等于本地历史数组
      this.history = JSON.parse(window.localStorage.getItem("history"))
    }else{//否则为空
      this.history = []
    }
    getHomeData().then((data)=>{
            this.keylists = data.homeman
            console.log(this.keylists)
        })
  }
}
</script>

<style lang="scss">
.search .searchover{
  width: 100%;
  margin-top: 30px;
  .header{
    width: 90%;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    span{
      color: #ff751a;
    }
  }
  .meiyou{
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 50%;
      height: 50%;
    }
  }
  .item{
    display: flex;
    width: 90%;
    margin: 0 auto;
    align-items: center;
    margin-bottom: 20px;
    .imgs{
      width: 30%;
      img{
        width: 100%;
      }
    }
    .msg{
      flex: 1;
      display: flex;
      height: 100%;
      // background-color: red;
      flex-direction: column;
      padding-left: 10px;
      box-sizing: border-box;
      .name{
        font-size: 14px;
      }
      .who,.bq{
        font-size: 12px;
        color: #c5c5c5;
        margin-top: 20px;
      }
      .watch{
        margin-top: 20px;
        font-size: 14px;
        color: #c5c5c5;
      }
    }
    .like{
      width: 60px;
      height: 30px;
      background-color: #ffe120;
      text-align: center;
      line-height: 30px;
      border-radius: 15px;
      font-size: 13px;

    }
  }
}
.search .moren{
  width: 100%;
}
.search .inp{
  width: 90%;
  margin: 0 auto;
  font-size: 12px;
  color: #999;
  background-color: #f3f5f5;
  display: flex;
  position: relative;
  .fangdaj{
    position: absolute;
    left: 7%;
    top: 3px;
    width: 24px;
    height: 24px;
    img{
      width: 100%;
    }
  }
  input{
    flex: 1;
    margin-right: 10px;
    outline: none;
    border: none;
    height: 30px;
    line-height: 30px;
    background-color: #dfdfdf;
    text-indent: 20%;
    border-radius: 15px;
  }
  .wenzi{
    font-size: 14px;
  }
}
.search .hisbody{
  
    width: 90%;
    margin: 0 auto;
    .item{
      display: flex;
      justify-content: space-between;
      height: 50px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dfdfdf;
      .left{
        svg{
          width: 20px;
          height: 20px;
        }
      }
      .right{
        svg{
          width: 20px;
        height: 20px;
        }
      }
      .md{
        flex: 1;
        height: 20px;
        font-size: 14px;
        line-height: 20px;
      }
    }
    
  
}
.search .history{
  width: 90%;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .wenzi{
    font-size: 12px;
    color: #cfd0d0;
  }
  svg{
    width: 16px;
    height: 16px;
  }
  
}
.search .header{
  width: 90%;
  height: 50px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  line-height: 50px;
  .back{
    position: absolute;
    top: 10px;
    left: 0px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    svg{
      width: 20px;
      height: 20px;
    }
  }
}
.search .hot{
  width: 90%;
  margin: 0 auto;
  .top{
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .wenzi{
      font-size: 12px;
      color: #99b5d7;
    }
    svg{
      width: 16px;
      height: 16px;
    }
  }
  .body{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item{
      padding: 2px 5px;
      border-radius: 10px;
      margin-bottom: 10px;
      margin-right: 10px;
      font-size: 12px;
      border: 1px solid #dfdfdf;
    }   

  }
}
</style>